<template>
    <article class="public-header-content">
        <div class="container">
            <div class="header">
                <i></i>租售比计算器
            </div>
            <a-row class="content clearfix" :gutter="30" type="flex" justify="center" style="margin: 0">
                <article class="NotLoggedIn-box" v-show="!isLoggedIn">
                    <img src="/static/img/NotLoggedIn-lock1.svg" alt="">
                    <p>更多信息请您 <a @click="cellLogin">登录</a> 后查看</p>
                </article>
                <a-col :span="12" class="left-box">
                    <h3>计算条件</h3>
                    <article>
                        <aside>
                            <h5 class="left">房屋总价（$）</h5>
                            <div class="right">
                                <a-input-number v-model="HousePrice" @change="HousePriceChange" prefix="iconfont icon-dkw_daikuan-"></a-input-number>
                            </div>
                        </aside>
                        <aside>
                            <h5 class="left">月租金（$）</h5>
                            <div class="right">
                                <a-input-number v-model.number="monthlyRent" @change="monthlyRentChange" prefix="iconfont icon-baifenbi"></a-input-number>
                            </div>
                        </aside>
                    </article>
                </a-col>
                <a-col :span="12" class="right-box">
                    <h3>匹配结果</h3>
                    <div class="chart-div" id="pieChart-Rent-ratio-calculator"></div>
                </a-col>
            </a-row>
        </div>

        <!--公共登录modal框-->
        <loginModal ref="loginModal" @cellRegisterSon="cellRegisterSon"></loginModal>
        <!--公共注册modal框-->
        <registerModal ref="registerModal" @cellLoginSon="cellLoginSon"></registerModal>

        <p v-show="false">{{getHousePrice}}</p>
        <p v-show="false">{{getEstateHouseDetails}}</p>

    </article>
</template>

<script>
    import loginModal from '../../components/login.vue';//公共登录modal框
    import registerModal from '../../components/register.vue';//公共注册modal框

    export default {
        data() {
            return {
                isLoggedIn: false,//用户是否登录

                myEcharts: '',
                HousePrice: '', //房屋总价（$）
                monthlyRent: '',    //月租金（$）
                AnnualRentalYield: 6,   //年租金收益率
            }
        },
        computed: {
            //从state获取房源价钱数据
            getHousePrice() {
                if(this.$store.getters.get_housePrice){
                    this.HousePrice = this.$store.getters.get_housePrice;
                    this.get_Rent_atio();
                }
                return this.$store.getters.get_housePrice
            },
            //从state获取新房详情数据
            getEstateHouseDetails() {
                if(this.$store.getters.get_EstateHouseDetails){
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_EstateHouseDetails).length != 0){
                        //延时1s，否则会造成死循环，或者其他报错
                        this.$nextTick(() => {
                            //判断首付款比例downPayment是否为null
                            if(this.$store.getters.get_EstateHouseDetails.rent != null){
                                this.AnnualRentalYield = this.$store.getters.get_EstateHouseDetails.rent
                            }
                        })
                    }
                }
                return this.$store.getters.get_EstateHouseDetails;
            },
        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('pieChart-Rent-ratio-calculator'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });
            // 判断用户是否登录
            if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                this.isLoggedIn = true;
            }else{
                this.isLoggedIn = false;
            }

        },
        methods: {
            //初始化时根据本房源价钱及后台管理的年化收益率计算月租金
            get_Rent_atio() {
                this.$nextTick(() => {
                    this.monthlyRent = parseInt(this.HousePrice * this.AnnualRentalYield / 100 / 12);//月租金 = 房价 * 年化收益率 / 12
                    this.Rent_atio_echarts(this.AnnualRentalYield);
                });
            },
            //房源价钱变化
            HousePriceChange(value) {
                this.HousePrice = value;
                this.monthlyRentChange_get_Rent_atio();
            },
            //月租金变化
            monthlyRentChange(value) {
                this.monthlyRent = value;
                this.monthlyRentChange_get_Rent_atio();
            },
            //房源价钱变化/月租金变化——计算租售比：每月租金*12/房屋总价 = 租售比%
            monthlyRentChange_get_Rent_atio(){
                this.$nextTick(() => {
                    let year_rent = parseFloat(this.monthlyRent) * 12;  //年租金 = 月租金 * 12
                    this.AnnualRentalYield = parseFloat(((year_rent / this.HousePrice) * 100).toFixed(1));//租售比% = 月租金 * 12 / 房屋总价
                    this.Rent_atio_echarts(this.AnnualRentalYield);
                });
            },
            //租售比计算器——饼图
            Rent_atio_echarts(AnnualRentalYield){
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    color:['#38a8da','#d4effa'],
                    legend: {
                        orient: 'vertical',
                        right: '30',
                        top: '0',
                        data: ['租售比']
                    },
                    series: [{
                        type: 'pie',
                        radius: ['60%', '75%'],
                        avoidLabelOverlap: false,//是否启用防止标签重叠策略，默认开启
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                                textStyle: {
                                    fontSize: 16,
                                    fontWeight: 'bold'
                                },
                                formatter:'{b}\n{c}%'
                            }
                        },
                        data: [
                            {
                                value: AnnualRentalYield,
                                name: '租售比',
                                label:{
                                    normal:{
                                        show:true
                                    }
                                }
                            },
                            {
                                value: 100 - AnnualRentalYield,
                                name: '',
                            }
                        ],
                        z: 9,
                    }]
                });
            },
            //触发显示登录框
            cellLogin(){
                this.$refs.loginModal.$emit('handleLoginModal');
            },
            //触发显示注册框
            cellRegister(){
                this.$refs.registerModal.$emit('handleRegisterModal');
            },
            // register子组件中触发本父组件方法cellLoginSon，以调用登录modal框
            cellLoginSon(){
                this.$refs.loginModal.$emit('handleLoginModal');
            },
            // login子组件中触发本父组件方法cellRegisterSon，以调用注册modal框
            cellRegisterSon(){
                this.$refs.registerModal.$emit('handleRegisterModal');
            },

        },
        components: {
            loginModal,
            registerModal,
        }
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        .public-header-content {
            margin: 50px 0;
            border-radius: 5px;
            overflow: hidden;
            >.container {
                background: #fff;
                > .header {
                    font-size: 20px;
                    color: #000;
                    text-indent: 20px;
                    padding: 15px 0;
                    border-bottom: 1px solid #e5e5e7;
                    > i {
                        width: 5px;
                        height: 26px;
                        float: left;
                        background: #00b6ef;
                    }
                }
                > .content {
                    width: 100%;
                    padding: 40px 0;
                    position: relative;
                    display: table;
                    >.NotLoggedIn-box{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        /*display: flex;*/
                        /*display: -webkit-flex;*/
                        /*align-items: center;*/
                        /*justify-content: center;*/

                        display: table-cell;
                        vertical-align: middle;

                        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 60%);
                        background-color: rgba(255, 255, 255, .7);
                        z-index: 9;
                        >img{
                            display: inline-block;
                            width: 120px;
                            margin: 100px 0 0 0;
                        }
                        >p{
                            display: block;
                            font-size: 16px;
                        }
                    }
                    >.left-box{
                        >h3{
                            font-size: 20px;
                            color: #000;
                            text-align: center;
                            margin: 0 0 30px 0;
                        }
                        >article{
                            width: 100%;
                            border: 1px solid #dfe3e6;
                            margin-top: 30px;
                            >aside{
                                width: 100%;
                                height: 60px;
                                line-height: 60px;
                                border-bottom: 1px solid #dfe3e6;
                                overflow: hidden;
                                >h5{
                                    width: 25%;
                                    font-size: 15px;
                                    color: #000;
                                    text-align: center;
                                    border-right: 1px solid #dfe3e6;
                                }
                                >div.right{
                                    text-align: center;
                                    width: 75%;
                                    position: relative;
                                    padding: 0 30px;
                                    >div{
                                        width: 100%;
                                        text-indent: 10px;
                                    }
                                }
                            }
                            >aside:last-of-type{
                                border: none;
                            }
                        }
                    }
                    >.right-box{
                        position: relative;
                        >h3{
                            font-size: 20px;
                            color: #000;
                            text-align: center;
                            margin: 0 0 30px 0;
                        }
                        >p{
                            font-size: 14px;
                            color: #000;
                            text-align: center;
                            margin-top: 4px;
                        }
                        >div.chart-div{
                            width: 100%;
                            height: 250px;
                        }
                    }
                }
            }
        }
    }
</style>
